<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/form.css"/>
		<script type="text/javascript" src="jQuery/jquery-2.1.1.min.js"></script>
		<script type="text/javascript">
			function aHide(className){
				document.getElementsByClassName('oremail')[0].style.display = 'block';
				if (className == 'orphone') {
					document.getElementsByClassName('item-email-wrap')[0].style.display = 'none';
				}else if(className == 'oremail'){
					document.getElementsByClassName('item-email-wrap')[0].style.display = 'block';
					document.getElementsByClassName('oremail')[0].style.display = 'none';
				}
			}
			function hideFont_showfont(index){
				var oTxt = document.getElementsByTagName('txt');
				var oSpan = document.getElementsByTagName('span');
				for (var n=0;n<oSpan.length;n++) {
					oSpan[n].innerHTML = '';
				}
				for (var i=0;i<oTxt.length;i++) {
					oTxt[i].className = 'txt1';
				}
				switch (index){
					case 0:
						document.getElementsByTagName('txt')[index].className = 'txt2';
						document.getElementsByTagName('span')[index].innerHTML = '<img src="img/alertz.gif" class="tip_img"/>支持中文，字母，数字，"-"，"_"的组合，4-20个字符'  ;         
						break;
					case 1:
						document.getElementsByTagName('txt')[index].className = 'txt2';
						document.getElementsByTagName('span')[index].innerHTML = '<img src="img/alertz.gif" class="tip_img"/>建议使用数字，字母和符号两种以上的组合，6-20个字符';
						break;
					case 2:
						document.getElementsByTagName('txt')[index].className = 'txt2';
						document.getElementsByTagName('span')[index].innerHTML = '<img src="img/alertz.gif" class="tip_img"/>请再次输入密码';
						break;
					case 3:
						document.getElementsByTagName('txt')[index].className = 'txt2';
						document.getElementsByTagName('span')[index].innerHTML = '<img src="img/alertz.gif" class="tip_img"/>完成验证后，你可以使用该邮箱找回密码';
						break;
					case 4:
						document.getElementsByTagName('txt')[index].className = 'txt2';
						document.getElementsByTagName('span')[index].innerHTML = '<img src="img/alertz.gif" class="tip_img"/>完成验证后，你可以使用手机号找回密码';
						break;
					case 5:
						document.getElementsByTagName('txt')[index].className = 'txt2';
						document.getElementsByTagName('span')[index].innerHTML = '<img src="img/alertz.gif" class="tip_img"/>看不清楚？点击更换验证码';
						break;
					case 6:
						document.getElementsByTagName('txt')[index].className = 'txt2';
						break;
					default:
						break;
				};
				
			};
			function changCode(){
				var _code = ''
				for (var i=0;i<4;i++) {
					_code += parseInt(Math.random()*10);
				}
				//console.log(_code);
				document.getElementsByClassName('img-code')[0].innerHTML = _code;
			};
			var timer = 0;
			function getCode(){
				if (timer == 0) {
					var num = 120;
					timer = window.setInterval(function(){
						document.getElementsByClassName('btn-phonecode')[0].innerHTML = num + 's后重新获取';
						num--;
						if (num<0) {
							window.clearInterval(timer);
							timer = 0;
							document.getElementsByClassName('btn-phonecode')[0].innerHTML = "获取验证码";
							document.getElementById('code-btn').innerHTML = '';
						}
					},100);
				};
			};
			function register(){
				var obj = new Object();
				obj.checkUserName = function(){
					var oUserName = document.getElementById('username');
					
				}
				
				return obj;
			}
			
			
			
			$(function(){
				changCode();
			//邮箱验证和手机验证的转换
				//console.log($('a').length);
				$('a').click(function(){
				//console.log($(this).parent().attr('class'));
				aHide($(this).parent().attr('class'));
				})
			//txt绑定点击事件
				$('txt').click(function(){
					//console.log(typeof($(this).index('txt')))
					$(this).next().focus()
					hideFont_showfont($(this).index('txt'))
					
				});
			//input绑定点击事件
				$('input').click(function(){
					//console.log(typeof($(this).index('txt')))
					hideFont_showfont($(this).index('input'))
				});
			//绑定input失焦事件
				$('input').blur(function(){
					$(this).prev().removeClass('txt2').addClass('txt1')
					$(this).parent().next().children().html('');
				})
			//验证码按钮绑定事件
				$('.img-code').click(function(){
					changCode();
				})
			//点击获取手机验证码
				$('button[type="button"]').click(function(){
					getCode()
					$('span:last').html('<img src="img/alertz.gif" class="tip_img"/>验证码已发生，120秒内有效')
				})
			 		
			
			
			})
		</script>
	</head>
	<body>
		<form action="" method="post" id="redister-form">
			<div class="form-item">
				<label for="username">用	 户 名</label>
				<txt class="txt1">您的账户名和登录名</txt>
				<input type="text" id="username" class="field"/>
				<i></i>
			</div>
			<div class="form-tip">
				<span></span>
			</div>
			<div class="form-item">
				<label for="userpass">设置密码</label>
				<txt class="txt1">建议至少使用两种字符组合</txt>
				<input type="password" id="userpass" class="field" />
				<i></i>
			</div>
			<div class="form-tip">
				<span></span>
			</div>
			<div class="form-item">
				<label for="againpass">确认密码</label>
				<txt class="txt1">请再次输入密码</txt>
				<input type="text" id="againpass" class="field"/>
				<i></i>
			</div>
			<div class="form-tip">
				<span></span>
			</div>
			<div class="item-email-wrap">
				<div class="form-item">
					<label for="formemail">邮箱验证</label>
					<txt class="txt1">建议使用常用邮箱</txt>
					<input type="text" id="formemail" class="field" />
					<ul class="suggest-container email-suggest" style="display: none;">
						<li class="">
							<div class="value">
								@qq.com
							</div>
						</li>
						<li class="">
							<div class="value">
								@126.com
							</div>
						</li>
						<li class="">
							<div class="value">
								@Sina.com
							</div>
						</li>
						<li class="">
							<div class="value">
								@Sohu.com
							</div>
						</li>
						<li class="">
						<div class="value">
								@Gmail.com
							</div>
						</li>
					</ul>
					<i></i>
				</div>
				<div class="form-tip">
					<span></span>
				</div>
				<div class="orphone">
					或<a href="javascript:;">手机验证</a>
				</div>
			</div>
			<div class="item-phone-wrap">
				<div class="form-item">
					<label for="formphone">中国+86</label>
					<txt class="txt1">建议使用常用手机</txt>
					<input type="text" id="formphone" class="field"/>
					<i></i>
				</div>
				<div class="form-tip">
					<span></span>
				</div>
				<div class="oremail">
					或<a href="javascript:;">邮箱验证</a>
				</div>
			</div>
			<div class="form-item">
				<label for="checknum">验	 证 码</label>
				<txt class="txt1">请输入验证码</txt>
				<input type="text" id="checknum" class="field form-authcode" />
				<!--<img src="" alt="" class="img-code"/>-->
				<button class="img-code" type="button">1234</button>
			</div>
			<div class="form-tip">
				<span></span>
			</div>
			<div class="form-item">
				<label for="checkphone">手机验证码</label>
				<txt class="txt1">请输入手机验证码</txt>
				<input type="text" id="checkphone" class="field phonecode" />
				<button class="btn-phonecode" type="button">获取验证码</button>
				<i></i>
			</div>
			<div class="form-tip">
				<span id="code-btn"></span>
			</div>
			<div>
				<button class="form-btn" type="button">立即注册</button>
			</div>
		</form>
		
	</body>
</html>
